<template>
  <div class="main">
    <!-- 左边 -->
    <el-row class="box">
      <el-col :span="10" class="box-left">
        <p><img src="../../public/imgs/logo.png" /></p>
        <p>欢迎!</p>
        <p>智学商城-后台管理系统</p>
      </el-col>
      <!-- 右边 -->
      <el-col :span="14" class="box-right">
        <p>登录</p>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item prop="username">
            <el-input type="text" autocomplete="off" prefix-icon="el-icon-user" v-model="ruleForm.username">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" autocomplete="off" prefix-icon="el-icon-lock" v-model="ruleForm.password">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
        <p>作者：肖桂英</p>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import cookie from "js-cookie";
import { mapActions } from "vuex"
import Apiadmin from "../api/admin"
import { debounce } from "@/utils/debounce"  //防抖
export default {
  data() {
    var validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      //登录参数
      ruleForm: {
        username: 'admin',
        password: '1234567'
      },
      rules: {
        username: [{
          validator: validateUser,
          trigger: 'blur'
        }],
        password: [{
          validator: validatePass,
          trigger: 'blur'
        }],
      }
    }
  },
  methods: {
    ...mapActions(["setUser", "setUserInfo"]),
    // 请求登录接口
    submitForm: debounce(function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm)
          Apiadmin.login(this.ruleForm).then(res => {
            let { data: AdminToken, errmsg, errno } = res
            // console.log(res)
            if (errno == 200) {
              this.$message.success('登录成功!')
              // token写入到cookie,过期时间为30分钟
              let now = new Date();
              now.setTime(now.getTime() + 1000 * 60 * 30);
              // console.log(res.data)
              cookie.set("AdminToken", res.data, { expires: now });
              // 请求用户数据
              Apiadmin.userinfo().then(res => {
                // console.log(res)
                let { data, errno, errmsg } = res
                // console.log()
                if (errno == 200) {
                  this.setUser(data)
                  this.setUserInfo(this.ruleForm)
                  this.$router.replace({
                    path: this.$route.query.skip || '/index'    //标记退出登录之前的页面
                  })

                } else {
                  this.$message.error(errmsg)
                }
              }).catch(err => {
                console.log(err)
              })
            } else {
              this.$message.error(errmsg)
            }

          })
        } else {
          console.log('error submit!!');
          return false;
        }

      })

    }, 1000)
  }
}
</script>
<style lang="less" scoped>
body {
  margin: 0px;
  padding: 0px;
}

.main {
  background: url(../../public/imgs/login-back.png);
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgb(25, 93, 203);
  width: 900px;
  min-height: 450px;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
}

// 左边
.box-left {
  background-color: #005de9;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  img {
    width: 100px;
    border: 1px solid #005de9;
    border-radius: 50%;
    box-shadow: #ffffff 5px -5px 30px 0px;
  }

  p {
    color: #ffffff;
    font-weight: bold;
    margin: 5px;
  }
}

// 右边
.box-right {
  min-height: 500px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 60px;

  .demo-ruleForm {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .el-form-item {
    width: 70%;
    text-align: center;
  }
}

.el-button {
  width: 130px;
  font-weight: 700;
}
</style>